<person-card>
<div class="avatar">
	<img src="{opts.person.img}">
</div>
<div class="base-info">
	<p class="name">{opts.person.name}</p>
	<p class="title">{opts.person.title}</p>
</div>
<div class="extend-info">
	<p class="phone"><i class="fa fa-phone-square"></i> <a href="tel:{opts.person.phone}">{opts.person.phone}</a></p>
	<p class="email"><i class="fa fa-envelope-open"></i> <a href="mailto:{opts.person.email}">{opts.person.email}<a></p>
	<p class="location"><i class="fa fa-map"></i> {opts.person.location}</p>
</div>
<div class="tip">Person Card</div>
<style>
	:scope{
		display: block;
		position: relative;
		border:1px solid #ededed;
		border-radius: 3px;
		padding: 1rem 1rem 0 1rem;
		width: calc(100vw - 8.8rem);
	}
	:scope .avatar{
		width: 3rem;
		height: 3rem;
		display: inline-block;
	}
	:scope .avatar img{
		border-radius: 3px;
	}
	:scope .name{
		font-size: 1.2rem;
		font-weight: bold;
		line-height: 2rem;
	}
	:scope p{
		margin-bottom: 0!important;
	}
	:scope .title{
		line-height: 1rem;
	}
	:scope .base-info{
		width: calc(100% - 3.5rem);
		display: inline-block;
		vertical-align: top;
		text-indent: 0.5rem;
	}
	:scope .extend-info{
		padding-top: 0.5rem;
		color: #666;
	}
	:scope .extend-info p{
		font-size: 0.95rem;
		line-height: 1.75rem;
	}
	:scope .extend-info i{
		margin-right: 0.5rem;
	}
	:scope .tip{
		margin-top: 0.5rem;
		border-top: 1px solid #ededed;
		color: #666;
		line-height: 2rem;
	}
</style>
</person-card>